<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /** 需求：当用户点击了校验按钮，要获取输出框中的内容。
         然后验证其是否合法。
         验证的规则是:
         必须由字母，数字。下划线组成。并且长度是 5 到 12 位。 **/
        
        function onclickFun() {
// 当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var ursenameObj=document.getElementById("ursename");

            // alert(ursenameObj);
            // [object HTMLInputElement] 它就是 dom 对象
            // alert(ursenameObj.value);

            var ursenameText = ursenameObj.value;
            // 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术

            var patt = /^\w{5,12}$/;//必须是数字、字母或下划线开头，并且必须为5到12位
            /** test()方法用于测试某个字符串，是不是匹配我的规则 ，
              匹配就返回 true。不匹配就返回 false. * */

            var ursenamespanObj=document.getElementById("ursenamespan");
            // innerHTML:表示起始标签和介素标签的内容,该属性可读可写
            // alert(ursenamespanObj.innerHTML);

            if (patt.test(ursenameText)){
                // alert("用户名合法");
                // ursenamespanObj.innerHTML="用户名合法";
                ursenamespanObj.innerHTML="<img src=\"正确.png\" width=\"20\"height=\"20\">";


            }else {
                // alert("用户名不合法");
                // ursenamespanObj.innerHTML="用户名不合法";
                ursenamespanObj.innerHTML="<img src=\"错误.png\" width=\"20\"height=\"20\">";
            }
        }
        


    </script>
</head>
<body>
用户名:<input type="text"id="ursename"value="LY"/>
<span style="color: #59a7e3" id="ursenamespan" ;></span>
<!--通过绑定id把弹出框绑定到span中-->

<button onclick="onclickFun()">验证</button>
</body>
</html>